<template>
  <view :style="colorStyle" v-if="info.id">
    <block v-for="(item, index, key) in info.orderDetailList" :key="key">
      <view class="infobox1">
        <view class="list flex aitems">
          <image :src="item.goods.img" class="img" mode=""></image>
          <view class="block1">
            <view class="info1 c1F1F1F f32 fontWeight ellipsis2">
              {{ item.goods.name }}
            </view>
            <view class="info2 c858585 f24">
              数量：X{{ item.goods.goodsNum }}
            </view>
            <view class="info3 c858585 f24">
              {{
                item.goods.goodsSpec
                  .replace(/{/g, "")
                  .replace(/}/, "")
                  .replace(/"/g, "")
              }}
            </view>
          </view>
        </view>
      </view>
      <view class="infobox3">
        <view class="cell flex aitems between">
          <view class="block1 c1F1F1F f32"> 描述相符 </view>
          <view class="block2 flex aitems">
            <image
              src="@/static/img7.png"
              @click.stop="goodsScoreChange(index, indexs, 'goodsScore')"
              v-for="(items, indexs) in item.goodsScore"
              mode=""
              :key="items"
            ></image>
            <image
              src="@/static/img47.png"
              @click.stop="goodsScoreChange2(index, indexs, 'goodsScore')"
              v-for="(items, indexs) in 5 - item.goodsScore"
              mode=""
              :key="items"
            ></image>
          </view>
        </view>
      </view>

      <view class="infobox2">
        <view class="block1 c1F1F1F f32 fontWeight"> 评价内容（选填） </view>
        <view class="block2">
          <textarea
            placeholder="请输入评价内容"
            v-model="item.content"
            maxlength="120"
            placeholder-class="c858585 f28"
          ></textarea>
        </view>
        <view class="block1 c1F1F1F f32 fontWeight"> 上传图片（选填）</view>
        <view class="block3 flex aitems wrap">
          <view
            class="img"
            @click="uploadImg(index)"
            v-if="item.img.length < 9"
          >
            <image src="@/static/img40.png" mode=""></image>
          </view>
          <view class="img" v-for="(items, indexs) in item.img" :key="items">
            <image :src="items" mode="aspectFill"></image>
            <image
              src="@/static/img41.png"
              class="close"
              @click="closeImg(index, indexs)"
              mode=""
            ></image>
          </view>
        </view>
      </view>
    </block>

    <view class="infobox4 f32 cfff" @click="save"> 发表 </view>

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { orderInfo, orderComment, putFileOSS } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { getToken, setStorage } from "../../utils/storage";
import { back, backtime, loading, msg } from "../../utils/wxAPI";
export default {
  mixins: [colors],
  data() {
    return {
      options: {},
      info: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    if (getToken()) {
      this.orderInfo();
    }
  },
  methods: {
    goodsScoreChange(index, indexs, key) {
      this.info.orderDetailList[index][key] = indexs + 1;
    },
    goodsScoreChange2(index, indexs, key) {
      this.info.orderDetailList[index][key] =
        this.info.orderDetailList[index][key] + indexs + 1;
    },
    async orderInfo() {
      let { data } = await orderInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        info.orderDetailList.map((item) => {
          item.content = "";
          item.goodsScore = 5;
          item.img = [];
        });
        this.info = info;
        console.log(this.info);
      }
    },
    async save() {
      loading();
      let detailList = [];
      this.info.orderDetailList.map((item) => {
        detailList.push({
          content: item.content,
          goodsScore: item.goodsScore,
          id: item.id,
          img: item.img.length == 0 ? "" : item.img.join(","),
        });
      });
      let { data } = await orderComment({
        detailList,
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        msg(data.msg);
        setStorage("orderRef", 1);
        backtime();
      }
    },
    async uploadImg(index) {
      uni.chooseImage({
        count: 9 - this.info.orderDetailList[index].img.length,
        success: async (res) => {
          let tempFilePaths = res.tempFilePaths;
          loading();
          for (let i = 0; i < tempFilePaths.length; i++) {
            let { data } = await putFileOSS(tempFilePaths[i]);
            this.info.orderDetailList[index].img.push(data.link);
            if (i == tempFilePaths.length - 1) {
              uni.hideLoading();
            }
          }
        },
      });
    },
    closeImg(index, indexs) {
      this.info.orderDetailList[index].img.splice(indexs, 1);
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  padding: 32rpx 24rpx 1rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .list {
    margin: 0 0 30rpx 0;

    .img {
      width: 180rpx;
      height: 180rpx;
      border-radius: 28rpx;
    }

    .block1 {
      width: calc(100% - 180rpx - 20rpx);
      margin-left: 20rpx;

      .info1 {
      }

      .info2 {
        margin: 16rpx 0;
      }

      .info3 {
      }
    }
  }
}

.infobox2 {
  padding: 32rpx 24rpx 1rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .block1 {
  }

  .block2 {
    margin: 24rpx 0 32rpx;
    padding: 28rpx 24rpx;
    background: #f5f5f5;
    border-radius: 28rpx;
    height: calc(280rpx - 28rpx - 28rpx);

    textarea {
      width: 100%;
      height: 100%;
    }
  }

  .block3 {
    padding: 24rpx 0;

    .img {
      display: inline-block;
      position: relative;
      margin: 0 20rpx 20rpx 0;

      image {
        width: 183rpx;
        height: 183rpx;
        border-radius: 28rpx;
      }

      .close {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        z-index: 1;
        top: -10rpx;
        right: -10rpx;
      }
    }
  }
}

.infobox3 {
  padding: 20rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .cell {
    padding: 16rpx 0;

    .block1 {
    }

    .block2 {
      image {
        width: 36rpx;
        height: 36rpx;
        margin: 0 0 0 16rpx;
      }
    }
  }
}

.infobox4 {
  background: var(--view-theme);
  border-radius: 44rpx;
  margin: 84rpx 30rpx 0;
  padding: 24rpx 0;
  text-align: center;
}
</style>
